<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- 背景效果 -->
    <div class="absolute inset-0 overflow-hidden">
      <!-- 动态背景形状 -->
      <div class="absolute top-0 -right-24 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob"></div>
      <div class="absolute bottom-0 -left-24 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-blob animation-delay-2000"></div>
      
      
      <!-- 光线效果 -->
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-full bg-gradient-radial from-blue-500/5 to-transparent"></div>
    </div>
    
    <div class="w-full max-w-md space-y-8 relative z-10">
      <!-- 注册卡片 -->
      <div class="bg-gray-800/80 backdrop-blur-sm rounded-xl shadow-2xl overflow-hidden border border-gray-700">
        <div class="h-2 w-full bg-gradient-to-r from-purple-500 to-blue-600"></div>
        
        <div class="px-8 pt-8 pb-10">
          <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-purple-600 to-blue-600 mb-4 shadow-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
              </svg>
            </div>
            <h2 class="mt-2 text-3xl font-extrabold text-white">
              注册新账号
            </h2>
            <p class="mt-2 text-sm text-gray-400">
              已有账号？
              <router-link to="/login" class="font-medium text-blue-400 hover:text-blue-300 transition">
                立即登录
              </router-link>
            </p>
          </div>
          
          <form class="mt-8 space-y-6" @submit.prevent="handleRegister">
            <div class="space-y-4">
              <div>
                <label for="username" class="block text-sm font-medium text-gray-300 mb-1">用户名</label>
                <input
                  id="username"
                  v-model="form.username"
                  name="username"
                  type="text"
                  autocomplete="username"
                  required
                  class="appearance-none relative block w-full px-3 py-3 border border-gray-600 placeholder-gray-500 text-white bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
                  placeholder="用户名"
                  :disabled="loading"
                />
              </div>
              
              <div>
                <label for="email" class="block text-sm font-medium text-gray-300 mb-1">邮箱地址</label>
                <input
                  id="email"
                  v-model="form.email"
                  name="email"
                  type="email"
                  autocomplete="email"
                  required
                  class="appearance-none relative block w-full px-3 py-3 border border-gray-600 placeholder-gray-500 text-white bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
                  placeholder="your-email@example.com"
                  :disabled="loading"
                />
              </div>
              
              <div>
                <label for="password" class="block text-sm font-medium text-gray-300 mb-1">密码</label>
                <input
                  id="password"
                  v-model="form.password"
                  name="password"
                  type="password"
                  autocomplete="new-password"
                  required
                  class="appearance-none relative block w-full px-3 py-3 border border-gray-600 placeholder-gray-500 text-white bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
                  placeholder="••••••••"
                  :disabled="loading"
                />
              </div>
              
              <div>
                <label for="password-confirm" class="block text-sm font-medium text-gray-300 mb-1">确认密码</label>
                <input
                  id="password-confirm"
                  v-model="form.passwordConfirm"
                  name="password-confirm"
                  type="password"
                  autocomplete="new-password"
                  required
                  class="appearance-none relative block w-full px-3 py-3 border border-gray-600 placeholder-gray-500 text-white bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"
                  placeholder="••••••••"
                  :disabled="loading"
                />
              </div>
            </div>

            <div class="flex items-center">
              <input
                id="agree-terms"
                v-model="form.agreeTerms"
                name="agree-terms"
                type="checkbox"
                required
                class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
                :disabled="loading"
              />
              <label for="agree-terms" class="ml-2 block text-sm text-gray-300">
                我已阅读并同意
                <a href="#" class="text-blue-400 dark:text-blue-400 hover:underline">服务条款</a>
                和
                <a href="#" class="text-blue-400 dark:text-blue-400 hover:underline">隐私政策</a>
              </label>
            </div>

            <!-- 错误提示 -->
            <div v-if="error" class="p-3 bg-red-900/60 text-red-200 rounded-lg text-sm">
              {{ error }}
            </div>

            <!-- 验证错误列表 -->
            <div v-if="validationErrors.length > 0" class="p-3 bg-red-900/60 rounded-lg">
              <p class="text-red-200 font-medium mb-1 text-sm">请修正以下错误：</p>
              <ul class="list-disc pl-5 text-red-200 text-xs space-y-1">
                <li v-for="(err, index) in validationErrors" :key="index">{{ err }}</li>
              </ul>
            </div>

            <div>
              <button
                type="submit"
                class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transform transition hover:scale-[1.02] active:scale-[0.98]"
                :disabled="loading || validationErrors.length > 0"
              >
                <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                  <svg v-if="!loading" class="h-5 w-5 text-purple-500 group-hover:text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                  </svg>
                  <svg v-else class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                </span>
                {{ loading ? '注册中...' : '注册' }}
              </button>
            </div>
          </form>

          <!-- SSO注册选项 -->
          <div class="mt-6">
            <div class="relative">
              <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-600"></div>
              </div>
              <div class="relative flex justify-center text-sm">
                <span class="px-2 bg-gray-800 text-gray-400">
                  使用单点登录
                </span>
              </div>
            </div>

            <div class="mt-6">
              <button
                type="button"
                @click="handleSSOLogin"
                class="w-full inline-flex justify-center items-center py-3 px-4 border border-gray-600 rounded-lg shadow-sm bg-gray-700 text-sm font-medium text-gray-300 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition hover:scale-[1.02] active:scale-[0.98]"
                :disabled="loading"
              >
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.605-3.369-1.343-3.369-1.343-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.022A9.578 9.578 0 0110 4.836c.85.004 1.705.114 2.504.336 1.909-1.291 2.747-1.022 2.747-1.022.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.933.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C17.137 18.163 20 14.418 20 10c0-5.523-4.477-10-10-10z" clip-rule="evenodd"></path>
                </svg>
                单点登录 (SSO)
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 装饰元素 -->
      <div class="absolute -bottom-20 -right-20 w-80 h-80 blur-3xl bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-full mix-blend-multiply opacity-70 animate-blob animation-delay-4000"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import axios from 'axios'

const router = useRouter()
const authStore = useAuthStore()

// 表单数据
const form = reactive({
  username: '',
  email: '',
  password: '',
  passwordConfirm: '',
  agreeTerms: false
})

const loading = ref(false)
const error = ref<string | null>(null)

// 表单验证
const validationErrors = computed(() => {
  const errors: string[] = []
  
  if (form.username && form.username.length < 3) {
    errors.push('用户名长度至少为3个字符')
  }
  
  if (form.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
    errors.push('请输入有效的邮箱地址')
  }
  
  if (form.password && form.password.length < 6) {
    errors.push('密码长度至少为6个字符')
  }
  
  if (form.password && form.passwordConfirm && form.password !== form.passwordConfirm) {
    errors.push('两次输入的密码不一致')
  }
  
  return errors
})

// 清除错误信息当用户修改表单时
watch(form, () => {
  error.value = null
})

// 处理注册
const handleRegister = async () => {
  if (validationErrors.value.length > 0) return
  
  loading.value = true
  error.value = null
  
  try {
    const registerSuccess = await authStore.register(
      form.username,
      form.email,
      form.password
    )
    
    if (registerSuccess) {
      // 注册成功，自动登录并重定向到首页
      await authStore.login({
        username: form.username,
        password: form.password,
        remember: false
      })
      
      // 跳转到首页
      router.push('/')
    } else {
      error.value = '注册失败，请稍后再试'
    }
  } catch (err: any) {
    console.error('注册失败:', err)
    
    if (err.response?.data?.error) {
      error.value = err.response.data.error
    } else if (err.response?.data?.detail) {
      error.value = err.response.data.detail
    } else {
      error.value = '注册失败，请稍后再试'
    }
  } finally {
    loading.value = false
  }
}

// 处理SSO登录
const handleSSOLogin = () => {
  // 保存重定向路径
  localStorage.setItem('auth_redirect', '/')
  
  // 重定向到SSO登录页面
  window.location.href = '/api/auth/sso'
}
</script>

<style scoped>
/* 背景动画 */
.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* 渐变背景 */
.bg-gradient-radial {
  background-image: radial-gradient(var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}
</style> 